<template>
  <div>
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      placeholder="请选择地区"
    >
    </el-cascader>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from "vue";
import { provinceAndCityData, codeToText } from "element-china-area-data";
// 定义省市
interface ObjType {
  province: string;
  city: string;
}
const props = defineProps<{
  obj: ObjType;
}>();
const localObj = ref<ObjType>(props.obj);
const emit = defineEmits(["update-obj"]);

const options = ref(provinceAndCityData); //数据
const selectedOptions = ref([]); //选中的数据
//当选中值变化时触发的事件
const handleChange = (value: any) => {
  // console.log(value); //区域码
  if (selectedOptions.value[0] != null && selectedOptions.value[1] != null) {
    const str =
      codeToText[selectedOptions.value[0]] + "/" + codeToText[selectedOptions.value[1]];
    localObj.value.province = codeToText[selectedOptions.value[0]];
    localObj.value.city = codeToText[selectedOptions.value[1]];
    emit("update-obj", localObj.value);
    // console.log(props.obj.city, "222"); //中文
  }
};
watch(localObj, (newObj) => {
  emit("update-obj", newObj);
});
</script>

<style lang="scss">
.el-cascader {
  width: 420px;
}
</style>
